<template>
  <view class="warp" :style="{ marginBottom: warpMBottom + 'rpx', ...animation }">
    <view
      v-if="title"
      class="title"
      :style="{ borderBottomColor: contentPTop ? '#f5f5f5' : 'transparent' }"
    >
      <view>
        <text class="title-text">{{ title }}</text>
        <text class="title-des">{{ des }}</text>
      </view>
      <!-- <view v-if="titleBtn" class="title-btn" @click="emit('titleBtnClick')">{{ titleBtn }}</view> -->
      <button v-if="titleBtn" class="edit-btn" type="none" @click="emit('titleBtnClick')">
        {{ titleBtn }}
      </button>
    </view>
    <view v-if="useSlotsDefault" class="content" :style="{ paddingTop: contentPTop + 'rpx' }">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { useSlots, watch, type CSSProperties, reactive } from 'vue';

  const useSlotsDefault = !!useSlots().default;
  const { windowWidth } = uni.getWindowInfo();

  const props = defineProps({
    title: propTypes.string,
    des: propTypes.string.def(''),
    titleBtn: propTypes.string,
    contentPTop: propTypes.number.def(0),
    warpMBottom: propTypes.number.def(30),
    /** 动画参数 ---- 隐藏/显示 */
    isShow: propTypes.bool.def(true),
    /** 动画参数 ---- 队列索引 */
    animationIndex: propTypes.number.def(1),
  });

  const animation = reactive<CSSProperties>({
    display: 'block',
    right: 0,
  });

  watch(
    () => props.isShow,
    (val) => {
      if (val) {
        animation.display = 'block';
        setTimeout(() => (animation.right = 0), 300 * props.animationIndex);
      } else {
        animation.display = 'none';
        animation.right = `-${windowWidth}px`;
      }
    },
    {
      immediate: true,
    },
  );

  const emit = defineEmits(['titleBtnClick']);
</script>

<style lang="scss" scoped>
  .warp {
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    transition: right 0.3s;

    .content {
      padding: 30rpx;
    }

    .title {
      height: 85rpx;
      border-bottom: 2rpx solid transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      &-text {
        position: relative;
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        z-index: 1;
        &::after {
          position: absolute;
          content: '';
          left: 0;
          bottom: -3rpx;
          z-index: -1;
          width: 100%;
          height: 13rpx;
          background: #ffe7b4;
        }
      }
      &-des {
        font-size: 24rpx;
        color: #808080;
        margin-left: 10rpx;
      }
      &-btn {
        line-height: inherit;
        color: #0d8bff;
        font-size: 28rpx;
      }
    }

    .edit-btn {
      width: 135rpx;
      height: 54rpx;
      border-radius: 10rpx;
      background-color: #e9e3b5;
      line-height: 54rpx;
      font-size: 23rpx;
      text-align: center;
    }
  }
</style>
